import { ref, onMounted, onUnmounted } from 'vue'
// vue中使用组合式函数 (说白了就是react 中的自定义hook);
// 组合式函数定义: 将一些公共的逻辑代码抽离出来, 进行封装, 然后实现复用


export function usemouse() {
    // 定义鼠标的初始位置
    const x = ref(0);
    const y = ref(0);

    const updatePositionFn = (event) => {
        // console.log('event', event);
        x.value = event.pageX
        y.value = event.pageY
    }

    onMounted(() => {
        // 给鼠标绑定鼠标移动事件
        window.addEventListener('mousemove', updatePositionFn)
    })

    onUnmounted(() => {
        window.removeEventListener('mousemove', updatePositionFn)
    })

    return {
        x, y
    }
}
